<template>
    <div class="components-view">

        <RichtTabelAdd v-if="flg == 'add'" @hidden="flg = ''" @getctgCodeValue1="getctgCodeValue1"
            @getBasicStyleProInfoApi="getBasicStyleProInfoApi"></RichtTabelAdd>
        <RichtTabelShow v-if="flg == 'show'" @hidden="flg = ''" ref="show"
            @getBasicStyleProInfoApi="getBasicStyleProInfoApi" :prposTabelData1="prposTabelData"></RichtTabelShow>

        <div :class="activeFlag > 2 ? 'maskDisabled1' : ''">
            <div :class="activeFlag > 2 ? 'maskDisabled2' : ''">
                <div class="title" v-show="$hasEditPermission('/BHView')">
                    <span></span>
                    <div>
                        <el-button type="primary" size="mini"
                            :disabled="!macNamebValue || activeFlag > 2 ? true : false"
                            @click="addFn('add')">追加</el-button>
                        <el-button type="primary" size="mini"
                            :disabled="!macNamebValue || activeFlag > 2 ? true : false"
                            @click="addFn('show')">関連付け</el-button>
                    </div>
                </div>
                <ux-grid ref="singleTable" :data="prposTabelData" style="width: 100%;" :header-cell-style="{
                    color: 'rgba(0, 0, 0, 0.85)',
                    fontSize: '14px',
                    textAlign: 'left',
                    fontWeight: 'bold',
                    padding: 0,
                    height: '32px',
                }" :cell-style="{
                    color: 'rgba(96,98,102,1)',
                    fontSize: '14px',
                    textAlign: 'left',
                    padding: 0,
                    height: '32px',
                }" :row-style="{
                    color: 'rgba(96,98,102,1)',
                    fontSize: '13px',
                    textAlign: 'left',
                    padding: 0,
                    height: '32px',
                }" :checkbox-config="{
                    showHeader: false,
                }" @selection-change="handleSelectionChange" @current-change="handleCurrentChange"
                    highlight-current-row :height="tableHeight" v-loading="loading"
                    element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
                    :element-loading-text="$t('message.bhView.loading')">
                    <template slot="empty"> No data </template>
                    <!-- <ux-table-column type="checkbox" width="40" align="center"> </ux-table-column> -->
                    <ux-table-column property="resp" width="45">
                        <template slot-scope="scope">
                            <!-- <img style="width: 35px; height: 35px; padding: 10px" :src="scope.row.resp ? checkImg : uncheckImg"
                        alt="" /> -->
                            <el-image @click="changeCheckFn(scope)"
                                style="width: 17px;height: 17px;padding: 2px;margin-top: 3px;cursor: pointer;left: 50%;transform: translateX(-50%);"
                                :src="scope.row.resp == 1 ? checkImg : uncheckImg" fit="fill"></el-image>
                        </template>
                    </ux-table-column>
                    <ux-table-column property="macName" title="ラインNo.(関連付け済み）">
                        <template slot-scope="scope">
                            <p>{{ scope.row.macName }}</p>
                        </template>
                    </ux-table-column>
                </ux-grid>
                <div class="footer">
                    <span>件数 = {{ prposTabelData.length }} ライン</span>
                    <el-button type="primary" size="mini" :disabled="!macNamebValue || activeFlag > 2 ? true : false" v-if="$hasEditPermission('/BHView')"
                        @click="removeLineNoAssociationApi">関連付け解除</el-button>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import { getBasicStyleProInfo, removeLineNoAssociation, GetRemoveLineNoAssociationMsg, updLineNoRep } from "@/api/api";
import $ from "jquery";
import EventBus from "@/eventBus/bus";
import { getLocalStorage } from "../../../utils/storage";
import RichtTabelAdd from './RightTabelAdd.vue';
import RichtTabelShow from './RightTabelShow.vue';
import eventBus from "@/eventBus/bus";

export default {
    name: "RightTabelCps",
    props: ['activeFlag'],
    data() {
        return {
            userData: getLocalStorage('userData'),
            prposTabelData: [],
            tableHeight: 528,
            loading: false,
            selectionArr: [],
            flg: '',
            checkImg: require("@/assets/img/checkbox_sel.png"),
            uncheckImg: require("@/assets/img/checkbox_unsel.png"),
            selectionItem: {}
        };
    },
    components: { RichtTabelAdd, RichtTabelShow },
    watch: {
        macNamebValue: {
            deep: true,
            handler: function (newV, oldV) {
                this.getBasicStyleProInfoApi();
            },
        },
    },
    computed: {
        macNamebValue() {
            return this.$store.state.macNameb;
        },
    },
    methods: {
        addFn(name) {
            eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样

            let Fn = () => {
                this.flg = name;
            }

            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                /**
                  * 4-1。   记录原来该运行的函数。
                  * 4-2。   执行保存弹出框操作。   
                  */
                this.$store.commit("changeIsCurrentFn", Fn);

                eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
            }

        },
        getctgCodeValue1(ctgCode, RType) {
            console.log(222, ctgCode, RType);
            this.$emit("getctgCodeValue1", ctgCode, RType)

        },
        // 新增
        async changeCheckFn(scope) {

            eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
            let Fn = async () => {
                let D = {
                    DmgCode: this.$store.state.macCode,
                    MacNumb: this.$store.state.macNameb,
                    MacCode: this.prposTabelData[scope.rowIndex].macCode,
                };

                let R = await updLineNoRep(D);

                this.getBasicStyleProInfoApi(false, false);
                this.$emit('retGetAllList');
            }

            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                /**
                  * 4-1。   记录原来该运行的函数。
                  * 4-2。   执行保存弹出框操作。   
                  */
                this.$store.commit("changeIsCurrentFn", Fn);

                eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
            }

        },
        handleSelectionChange(e) {
            console.log("fsdfsdfsdf", e);
            this.selectionArr = e;
        },
        handleCurrentChange(val) {
            this.$store.commit("changeMacName", val.macName);

            eventBus.$emit('getBasicStyleCompontensCurrent_EventBus');	//	基本仕样
            let Fn = () => {
                this.$emit('retGetAllList');
                console.log(val);
                this.selectionItem = val;

                this.$store.commit("changeRowCtgCode", val.ctgCode);
                this.$store.commit("changeMacName", val.macName);

                EventBus.$emit("clickRightTable", val.macName, val.macCode);
            }

            if (this.$store.state.isCurrentNext) {
                Fn();
            } else {
                /**
                  * 4-1。   记录原来该运行的函数。
                  * 4-2。   执行保存弹出框操作。   
                  */
                this.$store.commit("changeIsCurrentFn", Fn);

                eventBus.$emit('EventBusBasicStyleCompontensSaveFn');	//	基本仕样
            }
        },

        async removeLineNoAssociationApi() {
            let res = await GetRemoveLineNoAssociationMsg({
                LineNo: this.selectionItem.macName
            });
            this.$confirm(res.data.msg, '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(async () => {
                let dataJson = {
                    IsRep: this.selectionItem.resp,
                    MacCode: this.selectionItem.macCode,
                    DmgCode: this.$store.state.macCode,
                };
                removeLineNoAssociation(dataJson).then((res) => {
                    if (res.data.code != 0) {
                        return;
                    }
                    if (!res || res.data.code == 452) {
                        return;
                    }
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    this.getBasicStyleProInfoApi(false);
                });
            }).catch(() => {

            });


        },
        // 获取当前数据
        getBasicStyleProInfoApi(flg = true, isCurrent = true) {
            let dataJson = {
                macNumb: this.$store.state.macNameb,
                PltCode: this.$store.state.pltCode,
            };
            getBasicStyleProInfo(dataJson).then((res) => {
                this.prposTabelData = [];
                if (res.data.code != 0) {
                    return;
                }
                this.prposTabelData = res.data.data;

                setTimeout(() => {
                    let next = 0;
                    if (flg) {
                        this.prposTabelData.forEach((item, index) => {
                            if (item.macName == this.$store.state.macName) {
                                next = index;
                            }
                        })
                    }
                    if (isCurrent) {
                        this.$refs.singleTable.setCurrentRow(this.prposTabelData[next]);
                    }
                    this.selectionItem = this.prposTabelData[next];
                    this.$store.commit("changeRowCtgCode", this.prposTabelData[next].ctgCode);
                    EventBus.$emit("clickRightTable", this.prposTabelData[next].macName, this.prposTabelData[next].macCode);
                }, 300);
            });
        },
        initFn() {
            this.getBasicStyleProInfoApi();
        }
    },
    created() {
        let that = this;
        this.$nextTick(function () {
            let heightStyle = $(".components-view").height() - 85;
            that.tableHeight = heightStyle;
        });
        this.initFn();
    },
    mounted() {
        let that = this;
        // setTimeout(() => {
        //     this.prposTabelData.push({
        //         macCode: 18822,
        //         macName: "P-001-02",
        //         resp: 0
        //     })
        // }, 3000);
        window.addEventListener(
            "resize",
            () => {
                return (() => {
                    let heightStyle = $(".components-view").height() - 85;
                    console.log(heightStyle);
                    that.tableHeight = heightStyle;
                })();
            },
            false
        );
    },
    beforeDestroy() { },
    destroyed() { },
    updated() {
        // 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
        var elements = document.querySelectorAll('.elx-cell--checkbox');

        // 遍历这些元素  
        elements.forEach(function (element) {
            // 修改每个元素的title属性  
            element.setAttribute('title', '');
        })
    },
};
</script>
<style lang="scss" scoped>
.components-view {
    height: 100%;
    width: 100%;
    max-height: calc(100% - 41px);

    // background-color: red;
    .title {
        width: 100%;
        height: 45px;
        border: 1px solid #c3c3c3;
        border-bottom: 0 none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 4px;


    }

    ::v-deep .el-checkbox__label {
        display: none;
    }
}

.footer {
    height: 38px;
    // background-color: #EDEEEFFF;
    border: 1px solid #c3c3c3;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//     background: rgb(233, 236, 237);
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
    border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
    box-shadow: none;
}

::v-deep .elx-table .elx-table--border-line {
    border-color: #c3c3c3;
}
</style>
